<template>
  <!-- 用法 ：
        作者： 杨航
          tree-node： 树形数据
          defaultProps： 树形默认数据    { label: 'label', children: 'children', disabled: '', isLeaf: '', value: 'id' }  value,label,children 必填 ，否则报错
          selectParents 是否可选中父节点 默认为 true 如需仅可选中叶子节点 需传 false
          changeVal 选择回调 参数 为选中的 value
      <el-select-new :tree-node="treeData" :default-props="defaultProps" @changeVal="changeDeptVal" />
   -->
  <el-select
    ref="selectReport"
    v-model="valueReport"
    placeholder="请选择"
    class="el-select-new"
    :popper-append-to-body="false"
    clearable
    :disabled="disabled"
  >
    <el-option :value="welcomeReport.reportId" :label="welcomeReport.reportName" class="el-option-new">
      <el-tree
        :data="treeNode"
        :props="defaultProps"
        icon-class="el-icon-arrow-right"
        class="icho-tree no-select-tip"
        default-expand-all
        @node-click="handleNodeClick"
      />
    </el-option>
  </el-select>
</template>
<script>
export default {
  name: 'ElSelectNewComponent',
  props: {
    treeNode: {
      type: Array,
      default: () => []
    },
    defaultProps: {
      type: Object,
      default: () => { return { label: 'label', children: 'children', disabled: '', isLeaf: '', value: 'id' } }
    },
    selectParents: {
      type: Boolean,
      default: true
    },
    defaultValue: {
      type: Object,
      default: () => {}
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup() {},
  data() {
    return {
      welcomeReport: {
        reportId: '',
        reportName: ''
      },
      valueReport: '',
      defaultData: {}
    }
  },
  watch: {
    defaultValue: {
      handler(val) {
        this.defaultData = {}
        this.defaultData = { ...val }
      },
      immediate: true
    },
    valueReport(val) {
      this.$emit('changeVal', val)
    },
    defaultData: {
      handler(val) {
        this.welcomeReport.reportId = val[this.defaultProps.value] || val.deptId || ''
        if (val[this.defaultProps.label] || val.deptName) {
          this.welcomeReport.reportName = (val[this.defaultProps.label] || val.deptName)
          this.valueReport = this.welcomeReport.reportId
        } else {
          // 情空选中目标
          this.valueReport = ''
          this.welcomeReport = {
            reportId: '',
            reportName: ''
          }
          if (this.welcomeReport.reportId) {
            this.getNodeById(this.welcomeReport.reportId, this.treeNode)
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleNodeClick(node) {
      if (this.selectParents || !(node[this.defaultProps.children] && node[this.defaultProps.children].length > 0)) {
        this.welcomeReport.reportId = node[this.defaultProps.value]
        this.welcomeReport.reportName = node[this.defaultProps.label]
        this.$refs.selectReport.blur()
        this.valueReport = this.welcomeReport.reportId
      }
    },
    getNodeById(id, list) {
      list.forEach(t => {
        if (t[this.defaultProps.value] === id) {
          this.welcomeReport.reportId = t[this.defaultProps.value]
          this.welcomeReport.reportName = t[this.defaultProps.label]
          this.valueReport = this.welcomeReport.reportId
        } else {
          if (t.children && t.children.length > 0) {
            this.getNodeById(id, t.children)
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select-new{
  :deep(.el-select-dropdown__item){
    padding-left: 15px;
    padding-right: 15px;
  }
  .el-option-new{
    width: 100%;
    height:200px;
    overflow: auto;
    background-color:#fff;
  }
}
</style>
